<script lang="ts" setup>
import {SmileOutlined} from "@ant-design/icons-vue";
import {useDirectoryStore} from "../store/directoryData";
import {ref} from "vue";
import {message} from "ant-design-vue";

const columns = [
  {
    title: '完整学名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '中文名',
    dataIndex: 'cname',
    key: 'cname',
  },
  {
    title: '国家/组织国家/地区',
    dataIndex: 'country',
    key: 'country',
  },
  {
    title: '类型',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '更新时间',
    dataIndex: 'data',
    key: 'data',
  },
];

// Pinia Store
const DirectoryStore = useDirectoryStore();

const searchTerm = ref<string>('');

const updateDirectorySets = () => {
  DirectoryStore.updateDirectorySets();
};
updateDirectorySets();

const onSearch = ()=> {
  DirectoryStore.updateDirectorySets(searchTerm.value);
}
</script>

<template>
  <div class="flex justify-end mb-4">
    <a-input-search
        v-model:value="searchTerm"
        style="width: 300px"
        placeholder="输入关键词(学名/中文名)搜索"
        enter-button="搜索"
        size="middle"
        @search="onSearch"
    />
  </div>

  <a-table
    class="w-full"
    :columns="columns"
    :data-source="DirectoryStore.getDirectorySets"
    :loading="DirectoryStore.getPlantLoading"
    :pagination="DirectoryStore.pagination"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span class="flex items-center">
          <smile-outlined class="mr-2" />
          完整学名
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <router-link :to="{ name: 'PageTwo', params: { id: record.number }}" class="text-sky-400 hover:underline">
          {{ record.name }}
        </router-link>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
</style>
